<template>
  <div class="App">
    <h1 class="content">我是APP11</h1>
    <div>
      <p v-red>自定义指令test1</p>
      <p v-red>自定义指令test2</p>
      <p v-bgColor="'green'">自定义指令test3</p>
      <p v-bgColor="'blue'">自定义指令test4</p>
    </div>
    <Count/>
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name:"App",
  components:{
    Count,
  },
  directives:{
    //简写的自定义指令(定义的时候不需要添加v-,使用的时候需要添加v-)
    red(el){
      //el：指令所绑定的元素，可以用来直接操作 DOM。
      console.log("el.parentNode",el.parentNode);
      el.style.background ="red";
    },  
    //简写的接收值的自定义指令
    bgColor(el,binding) {
      el.style.background = binding.value;
    }
  }
}
</script>